<template>
  <div class="serverCpuLoad">
    <el-table
      :header-cell-style="{
        background: 'rgb(2, 16, 51)',
        color: 'aliceblue',
        border: '0px',
        'text-align': 'center',
        padding: '0px 0px 0px 0px',
        'box-shadow': '0px 0px 30px  rgb(1, 40, 107) inset',
      }"
      :cell-style="{
        background: 'rgb(2, 16, 51)',
        color: 'aliceblue',
        border: '0px',
        'text-align': 'center',
        padding: '0 0 0 0',
      }"
      :data="tableDataFn"
      height="100%"
      style="width: 100%"
      :fit="true"
    >
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <template v-for="item in tableColumns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          align="center"
          :width="item.width"
          :key="item.prop"
        >
          <template v-slot="scope">
            <template v-if="item.format == 'handleRow'">
              <!-- <el-button type="danger" plain size="mini">危险按钮</el-button> -->
              <el-tag @click="dialogOpen(scope.row)" size="mini" class="dialogOpenButton" effect='dark'>查看</el-tag>
            </template>
            <template v-else>
              <div>
                {{ scope.row[item.prop] }}
              </div>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-dialog
      title="Sql语句"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div >
          <!-- 对sql代码保留格式 -->
          <p>{{dialogData}}</p>
          <!-- <pre style="overflow:scroll">{{dialogData}}</pre> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button plain @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>>

<script>
import { getSqlLogical, getSqlPhysical } from "@/api/index.js";
import bus from "common/bus.js";
import tableColumns from "./CpuLoad.js";

export default {
  props: ["pageType"],
  data() {
    return {
      timerName: "CpuLoad",
      timerEventName: "timerCpuLoad",
      timerInterval: 1000 * 30,
      cpuLastSN: "0",
      updateFlag: false,
      getNum: 30,
      selectedMonID: "",
      tableColumns: tableColumns,
      tableDataFn: [],
      dialogVisible: false,
      dialogData: "",
    };
  },
  created() {
    bus.$on("selectedMonIDSqlServer", (msg) => {
        this.restData()
      this.selectedMonID = msg;

   
          this.initGetData()
    });

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

    bus.$on(this.timerEventName, (msg) => {
      if (msg.isGetData) {
        // this.getData();
      }
    });
  },
  mounted() {},
  computed: {},
  methods: {
    initGetData() {
      
      
        getSqlPhysical({ ip: this.selectedMonID.selectedIP })
          .then((_) => {
            
            this.tableDataFn = _.map((item) => {
              return {
                RecordTime: item.RecordTime,
                totalLogicalReads: item.totalPhysicalReads,
                text: item.text,
              };
            });
          })
          .catch((_) => {});
      
    },
    restData() {
        this.tableDataFn=[]
    },
    dialogOpen(val) {
        console.log(val.text)
      this.dialogData = val.text;

      this.dialogVisible = true;
    
    },
    handleClose() {
      this.dialogData = "";
      this.dialogVisible = false;
    },
  },
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
    bus.$off('selectedMonIDSqlServer')
  },
  watch: {},
  filters:{
      
  }
};
</script>

<style scoped>
.serverCpuLoad {
  height: calc(100% - 22px - 8px);
  margin-bottom: 0 !important;
  text-align: left;
}
.serverCpuLoad >>> .el-table::before {
  height: 0px !important;
}
.serverCpuLoad >>> .el-table tr {
  background-color: rgba(1, 40, 107, 0) !important;
}
.serverCpuLoad >>> .el-table {
  background: rgb(2, 16, 51);
}
.serverCpuLoad >>> .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.serverCpuLoad >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(4, 44, 119, 0.7);
  border-radius: 3px;
}
.dialogOpenButton{
    cursor: pointer;
}
</style>